import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TextInput, PixelRatio, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
const scale = GLOBAL.SCALE;
export class StepItem extends Component {
	constructor(props) {
		super(props)
	}

	/* 
		
	*/
	render () {
		let { day, hour, info, auditResult, visible, who, logId, remark } = this.props;
		let objImgRight = require('../../../../imgs/global/correct.png');
		let objImgError = require('../../../../imgs/store/fail.png');
		let zongImg = auditResult == 1 ? objImgRight : objImgError;
		return (
			<View style={styles.stepItem}>
				<View style={styles.stepItemLeft}>
					{logId ? (
						<View>
							<Text style={styles.stepItemLeftUp}>{hour || ''}</Text>
							<Text style={styles.stepItemLeftDown}>{day || ''}</Text>
						</View>
					) : (<Text>待审批</Text>)}
				</View>
				<View style={styles.stepItemMid}>
					<Text style={[styles.stepItemRound, !logId ? styles.stepItemRoundActive : null]}></Text>
					{
						visible ? (<Text style={[styles.stepItemLine, !logId ? styles.stepItemLineActive : null]}></Text>) : null
					}
				</View>
				<View>
					<View style={styles.stepItemRight}>
						<Text style={[styles.stepText, { paddingRight: 4 * scale }]}>{info}</Text>
						{
							logId ? (
								<Image source={zongImg} style={styles.stepRightImg} />
							) : null
						}
						<Text style={styles.stepFromPre}>{who || ''}</Text>
					</View>
					{remark ? (<View style={[styles.stepItemRight, { marginBottom: 20 * scale, width: 200 * scale, alignItems: 'center' }]}>
						<Text style={styles.stepText}>备注: </Text>
						<Text style={styles.stepText}>{remark}</Text>
					</View>) : null}
				</View>


			</View>
		)
	}
}
const styles = StyleSheet.create({
	stepItem: {
		flexDirection: 'row',
		flex: 1
	},
	stepItemLeft: {
		width: 50 * scale
	},
	stepItemLeftUp: {
		fontSize: 12 * scale,
		color: '#555',
	},
	stepItemLeftDown: {
		fontSize: 10 * scale,
		color: '#555',
		paddingTop: 3 * scale
	},
	stepItemMid: {
		marginLeft: 20 * scale,
		marginRight: 20 * scale
	},
	stepItemRound: {
		width: 5 * scale,
		height: 5 * scale,
		borderRadius: 5 * scale,
		backgroundColor: style.color.themeColor,
		marginTop: 6 * scale,
	},
	stepItemLine: {
		borderLeftColor: style.color.themeColor,
		borderLeftWidth: 2 / PixelRatio.get(),
		height: 34 * scale,
		marginTop: 3 * scale,
		marginLeft: 2 * scale
	},
	stepItemRoundActive: {
		backgroundColor: '#eaeaea',
	},
	stepItemLineActive: {
		borderLeftColor: '#eaeaea',
		borderLeftWidth: 2 / PixelRatio.get(),
	},
	stepItemRight: {
		flexDirection: 'row'
	},
	stepRightImg: {
		marginLeft: 7 * scale,
		marginTop: 3 * scale,
		marginRight: 8 * scale,
	},
	stepFromPre: {
		fontSize: 11 * scale,
		width: 120 * scale,
		marginBottom: 10 * scale
	},
	stepText: {
		fontSize: 11 * scale
	}
})